<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
  <script type="text/javascript" src="echarts/echarts.js"></script>
  <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
  <script type="text/javascript" src="js/caesar.js"></script>
  <script type="text/javascript" src="js/config.js"></script>
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
  <un /head>

<body>
  <p>注意：输出的字母结果可能不正确，但是偏移值分析 第一个和第二个差别较大的话，多半是正确的偏移值，推荐使用其他的凯撒密码工具进行偏移值结果输出</p>
  <button onclick="analysis()">分析</button>
  <button onclick="clearText()">清除内容</button>
  <textarea style="width:100%;height: 300px;" id="inStr"></textarea>
  <input id="check" type="checkbox" />图表按大到小排序
  <div id="letterCount"></div>

  <p>该图为默认图，遵循可读英语文章的字母分布情况</p>
  <div id="defaultLetter" style="width: 500px;height:400px;"></div>
  <p>该图为生成图，根据上面输入的字母进行生成</p>
  <div id="contrastLetter" style="width: 500px;height:400px;"></div>
  <script>
    var defaultChart = echarts.init(document.getElementById('defaultLetter'));
    var contrastChart = echarts.init(document.getElementById('contrastLetter'));

    function analysis() {
      var contrastFrequency = []; //生成图的频率分布
      var sequentialLetter = []; //基本字母表[a.,b,c....]
      var tihuanneirong;
      var letterHeighTolow = [];
      var frequencyHeighTolow = [];
      var inputstr = $("#inStr").val();
      var result;
      var letter = {};
      var contrastSequential = [];
      var resultKey = [];
      var duibilist = [];
      for (var i = 65; i <= 64 + 26; i++) {
        letter[i] = Number(0);
      }

      //转换大小写
      for (var i = 0; i < inputstr.length; i++) {
        var strAscii = inputstr.charCodeAt(i);
        if ((strAscii >= 65 && strAscii <= 90) || (strAscii >= 97 && strAscii <= 122)) {
          if (strAscii >= 97) {
            inputstr = inputstr.replace(inputstr.charAt(i), String.fromCharCode(strAscii - 32));
            letter[strAscii - 32]++;
          } else {
            letter[strAscii]++;
          }

        } else {
          /*alert("解析中出现不是字母字符，请检查输入内容");*/
        }
      }

      for (var i = 65; i <= (64 + 26); i++) {
        //inputstr += "\n" + String.fromCharCode(i) + "=" + letter[i];
        //计算频率
        var bilv = letter[i] / inputstr.length;
        contrastFrequency[i - 65] = bilv;
        sequentialLetter[i - 65] = String.fromCharCode(i);
        contrastSequential[i - 65] = String.fromCharCode(i);

      }
      $("#inStr").val(inputstr);

      //按从大到小顺序排列
      if ($("#check").prop("checked")) {
        for (var i = 0; i < 26; i++) {
          for (var j = 0; j < 26; j++) {
            if (letterFrequency[j] < letterFrequency[i]) {
              var t = letterFrequency[i];
              var t1 = sequentialLetter[i];
              letterFrequency[i] = letterFrequency[j];
              letterFrequency[j] = t;
              sequentialLetter[i] = sequentialLetter[j];
              sequentialLetter[j] = t1;

            }
            if (contrastFrequency[j] < contrastFrequency[i]) {
              var contrast = contrastFrequency[i];
              var contrast1 = contrastSequential[i];
              contrastFrequency[i] = contrastFrequency[j];
              contrastFrequency[j] = contrast;
              contrastSequential[i] = contrastSequential[j];
              contrastSequential[j] = contrast1;
            }
          }
        }
      }

      //计算相似值
      for (var i = 1; i <= 26; i++) {
        var resultList = frequencyContrast(contrastFrequency, i);
        duibilist[i - 1] = difference(letterFrequency, resultList);
        resultKey[i - 1] = i;
        //26次偏移的各个概率输出
        //console.log(resultKey[i - 1] + "||" + duibilist[i - 1]);
      }
      //将26次偏移的相似值进行排序
      for (var i = 0; i < duibilist.length; i++) {
        for (var j = 0; j < duibilist.length; j++) {
          if (duibilist[i] < duibilist[j]) {
            var t = duibilist[j];
            duibilist[j] = duibilist[i];
            duibilist[i] = t;

            t = resultKey[j];
            resultKey[j] = resultKey[i];
            resultKey[i] = t;
          }
        }
      }


      var out = caesarLettter(inputstr, resultKey[0]);
      $("#letterCount").html("总字符数:" + inputstr.length + "<br>" +
        "经过对比这段话可能存在的偏移值为：" + resultKey[0] + "(不相似度为：" + duibilist[0] + ")" +
        "<br>此外还可能为：<br>" + resultKey[1] + "(不相似度：" + duibilist[1] + ")" + "<br />" +
        resultKey[2] + "(不相似度：" + duibilist[2] + ")"

        +
        "<br> 输出最大可能原话" + out);

      defauloption = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: sequentialLetter,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '默认图',
          type: 'bar',
          barWidth: '60%',
          data: letterFrequency
        }]
      };

      /**
       * 对比图
       */
      contrastoption = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: contrastSequential,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '生成图',
          type: 'bar',
          barWidth: '60%',
          data: contrastFrequency
        }]
      };
      defaultChart.setOption(defauloption);
      contrastChart.setOption(contrastoption);
    }

    //清除文本内容
    function clearText() {
      $("#inStr").val("");
    }
  </script>

</body>

</html>